<script lang="ts" setup>
import { type PropType } from 'vue';
import { useAppStore } from '@/mobile/stores/app';
import { useUserAgent } from '@/mobile/hooks/user-agent'
import PageHeaderMenu from './PageHeaderMenu.vue';
import PageHeaderAvatar from './PageHeaderAvatar.vue';
import PageHeaderShare from './PageHeaderShare.vue';
import PageHeaderBack from './PageHeaderBack.vue';

const props = defineProps({
  type: {
    type: String as PropType<'' | 'secondary'>,
    default: '',
  },
});
const { browser } = useUserAgent();

const appStore = useAppStore();
</script>

<template>
  <header class="page-header h-48">
    <section
      class="fixed left-0 right-0 top-0 z-999999 h-48 flex items-stretch justify-between bg-white px-10 text-14 color-text-2"
      :class="{ 'shadow-[0_1px_6px_0_rgba(0,0,0,0.06)]': !appStore.uiStore.tabsFixed && props.type !== 'secondary' }"
    >
      <PageHeaderMenu v-if="props.type !== 'secondary'" />

      <PageHeaderBack v-else />

      <section class="flex-center flex-grow py-10">
        <img :src="appStore.config.logo" class="block h-full" :alt="appStore.config.name" v-if="props.type !== 'secondary' && appStore.config.logo">
      </section>

      <PageHeaderShare v-if="props.type === 'secondary' && browser.name !== 'WeChat'" />

      <PageHeaderAvatar />
    </section>
  </header>
</template>

<style lang="scss" scoped>
</style>
